@for $i from 1 to length($font-sizes) {
  .fs#{$i} {
    font-size: nth($font-sizes, $i);
  }
}

[data-dpr="2"] {
  @for $i from 1 to length($font-sizes) {
    .fs#{$i} {
      font-size: nth($font-sizes, $i) * 2;
    }
  }
}

[data-dpr="3"] {
  @for $i from 1 to length($font-sizes) {
    .fs#{$i} {
      font-size: nth($font-sizes, $i) * 3;
    }
  }
}

@for $i from 1 through length($colors) {
  .c#{$i} {
    color: nth($colors, $i);
  }
}

@for $i from 1 through length($colors) {
  .bd#{$i} {
    border: 1px solid nth($colors, $i);
  }
}

@for $i from 1 through length($colors) {
  .bg#{$i} {
    background-color: nth($colors, $i);
  }
}

.mt-16 {
  margin-top: px2rem(8px * 2);
}

.border-1px {
  position: relative;

  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transform-origin: left top;
    transform-origin: left top;
    width: 100%;
    height: 100%;
  }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2.0), only screen and (min-device-pixel-ratio: 2.0) {
  .border-1px::after {
    width: 200%;
    height: 200%;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2.5), only screen and (min-device-pixel-ratio: 2.5) {
  .border-1px::after {
    width: 300%;
    height: 300%;
    -webkit-transform: scale(0.33333334);
    transform: scale(0.33333334);
  }
}

.mb {
  border-bottom: 1px solid nth($colors, 13);
}

.box {
  @include position--absolute(px2rem(50px * 2), 0, 0, 0);

  background-color: nth($colors, 9);
  overflow-x: hidden;
  overflow-y: auto;
}
